<template>
	<view>
		<view class="search-box">
			<my-search @gosearch="gosearch"></my-search>
		</view>
		<view>
			<good-list @goshop="navigatorGo" :shopList="shopList"></good-list>
		</view>
		<view class="">
			<view  v-if="flag" class="foot">
				-----------我是有底线的-------------
			</view>
			<view class="noGoods">
				<image src="../../static/x4.png"></image>
				<text>暂无商品</text>
			</view>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list'
	export default{
		data(){
			return{
				shopList:[],
				pageIndex:1.,
				flag:true
			}
		},
		onLoad(){
			this.getShoplist();
		},
		methods:{
			//获取商品函数
			async getShoplist(){
				const res = await this.$myRequest({
					url:"/selectGoodsPageList",
					data:{"current":this.pageIndex,"sw":this.sw}
				})
				this.shopList = [...this.shopList,...res.data.records] 
				uni.stopPullDownRefresh()
			},
			navigatorGo(e){
				uni.navigateTo({
					url:"/pages/goods/goods-detail?id=" + e
				})
			},
			gosearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		},
		onReachBottom(){
			this.pageIndex++;
			this.getShoplist()
			this.flag = true
		},
		onPullDownRefresh(){
			console.log("下拉刷新")
			this.pageIndex = 1
			this.shopList = []
			this.flag = false
			setTimeout(()=>{
				this.getShoplist()
			},2000)
		},
		components:{
			"good-list":goodsList
		}
	}
</script>

<style lang="scss">
	.search-box{
		position: sticky;
		top: 0;
		z-index: 999;
	}
	.foot{
		width: 100%;
		height: 50px;
		line-height: 50px;
		text-align: center;
		font-size: 1.2rem;
		background-color: red;
		color: white;
	}
	.noGoods{
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		line-height: 50px;
		margin-top: 50px;
		image{
			width: 200rpx;
			height: 200rpx;
		}
		text{
			font-size: 1.3rem;
			color: red;
		}
		
	}
</style>